<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('dzd.quick Search Fields') })"
        >
        <el-button v-blur class="table-header-operate" type="primary">
            <span class="table-header-operate-text" @click="handleOperate">{{menu.label}}对账单操作</span>
        </el-button>
        </TableHeader>

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" />
        <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="baTable.form.operate ? true : false"
        @close="baTable.toggleForm(),baTable.getIndex()"
        >
            <template #header>
                <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                    {{menu.label}}对账单操作
                </div>
            </template>
            <operate />
        </el-dialog>

        <el-dialog v-model="state.exportDialogShow" title="选择对账单格式" width="500px">
            <el-empty v-show="state.exportList.length==0" description="暂无数据" />
            <ul class="export-list">
                <li v-for="item in state.exportList" @click="handleExport(item)">
                    {{ item.TITLE }}
                </li>
            </ul>
        </el-dialog>
        <!-- 表单 -->
        <!-- <PopupForm /> -->
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import { dzd } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
// import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import operate from './operate.vue'
import createAxios from '/@/utils/axios'
import fileDownload from 'js-file-download'
import { AxiosResponse } from 'axios'


const route = useRoute()
const menu = reactive({
    type: route.name == 'dzd/shou'?0:1,
    label: route.name == 'dzd/shou'?'应收':'应付',
})
provide('menu',menu)


const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(["edit","delete"])
const exportButton :any = [
{
        // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        render: 'tipButton',
        // 按钮名称
        name: 'info',
        // 鼠标放置时的 title 提示
        title: '导出对账单',
        // 直接在按钮内显示的文字，title 有值时可为空
        text: '导出',
        // 按钮类型，请参考 element plus 的按钮类型
        type: 'primary',
        // 按钮 icon
        icon: 'fa fa-download icon',
        class: 'table-row-info',
        // tipButton 禁用 tip
        disabledTip: false,
        // 自定义点击事件
        click: (row: any, field: any) => {
            getOutList(row)

        },
        // 按钮是否显示，请返回布尔值
        display: (row: any, field: any) => {
            return true
        },
        attr: {}
    },
]
const baTable = new baTableClass(
    new baTableApi(dzd),
    {
        pk: 'ID',
        column: [
            { type: 'selection', align: 'center', operator: false },
            // { label: t('dzd.ID'), prop: 'ID', align: 'center', operator: 'RANGE' },
            { label: t('dzd.DZDNO'), prop: 'DZDNO', align: 'center' },
            { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: exportButton, operator: false },
            // { label: t('dzd.JOBNO'), prop: 'JOBNO', align: 'center' },
            // { label: t('dzd.BILLTYPE'), prop: 'BILLTYPE', align: 'center', render: 'tag', replaceValue: { 1: t('dzd.BILLTYPE 1') } },
            { label: t('dzd.FPSQ'), prop: 'FPSQ', align: 'center',show:menu.type==0,operator:menu.type==0 },
            { label: t('dzd.CORP'), prop: 'CORP', align: 'center' },
            { label: t('dzd.AMEND'), prop: 'AMEND', align: 'center' },
            { label: t('dzd.DZOP'), prop: 'DZOP', align: 'center' },
            { label: t('dzd.DZDATE'), prop: 'DZDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            // { label: t('dzd.JOBOP'), prop: 'JOBOP', align: 'center' },
            // { label: t('dzd.JOBDATE'), prop: 'JOBDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            { label: t('dzd.NOTE'), prop: 'NOTE', align: 'center',operator:false },
            // { label: t('dzd.FPSQR'), prop: 'FPSQR', align: 'center' },
            // { label: t('dzd.FPSQDATE'), prop: 'FPSQDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            // { label: t('dzd.CHECKED'), prop: 'CHECKED', align: 'center' },
            // { label: t('dzd.CHECKER'), prop: 'CHECKER', align: 'center' },
            // { label: t('dzd.CHECKDATE'), prop: 'CHECKDATE', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            // { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined, ],
        defaultOrder: { prop: 'ID', order: 'desc' },
        showComSearch:true
    },
    {
        defaultItems: [],
    },
    {
        onTableDblclick:(table:any)=>{
            return false
        }
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.table.filter!.type = menu.type

    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})

const handleOperate = ()=>{
    baTable.form.operate = 'add'
}

const state:{
    exportDialogShow:boolean
    exportList:any[]
    DZDNO:string
} = reactive({
    exportDialogShow:false,
    exportList:[],
    DZDNO:''
})
const getOutList = (item:any)=>{
    state.exportDialogShow = true
    state.DZDNO = item.DZDNO
    createAxios({
        url:'/admin/dzd/out_list',
        params:{
            CORP:item.CORP
        }
    }).then((res:any)=>{
        state.exportList = res.data
    })
}

const handleExport = (item:any)=>{
    createAxios({
        url:"/admin/dzd/out",
        params:{
            id:item.ID,
            no:state.DZDNO
        },
        responseType:'blob'
    },
    { reductDataFormat: false }
    ).then((response:any)=>{
        // console.log(response)
        // // const disposition = (response as AxiosResponse).headers['content-disposition']
        // // console.log(disposition)
        // // const arr = disposition.split('filename=')
        // // const fileName = decodeURI(arr[1])
        fileDownload(response.data, menu.label+'对账单-'+state.DZDNO+'.xlsx')
        state.exportDialogShow = false
    })
}

</script>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'
export default defineComponent({
    name: 'dzd',
})
</script>

<style scoped lang="scss">
.export-list{
    li{
        list-style: none;
        border: 1px solid #eee;
        padding: 10px 24px;
        margin-top: -1px;
        cursor: pointer;
        &:hover{
            color: var(--el-color-primary);
        }
    }
}

</style>
